<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p ref="one">count:{{count}}</p>
        <p>doubleCount:{{doubleCount}}</p>
        <p>
            <button @click="addCount">count++</button>
        </p>
        <hr>
        <p>
            num:{{num}}
        </p>
        <hr>
        <p>
            <button @click="destroyHandler">销毁</button>
            <button @click="$destroy()">销毁</button>
        </p>
    </div>
</body>
<script>
    /* 
        Vue特征
        1. 声明式渲染  => Vue允许采用模板语法声明式的将数据渲染到DOM
            new Vue(option)

        2. 响应式   
            数据改变 => 视图也会更新


        Vue生命周期
            Vue实例 从创建 , 挂载 , 更新 ,销毁的过程 =>  Vue的生命周期 


        Vue生命周期钩子函数?
            在Vue生命周期不同阶段,添加的辅助函数,帮助用户在不同阶段添加自己的代码(查看数据 修改数据 调用方法)

            beforeCreate:  第一个执行的生命周期钩子函数, 发生在Vue实例创建之后, option配置项解析之前
                作用: 此时可以访问Vue实例,但是数据(data) 方法(methods) 计算属性(computed) 还未挂载到vue实例, 也没有配置Vue响应式 和 侦听器(watch)

            created:  发生在Vue实例创建, option配置项解析之后, 也就意味着不仅可以访问Vue实例,也可以使用Vue实例上绑定的 数据(data) 方法(methods) 计算属性(computed) 还未挂载到vue实例, 配置Vue响应式 和 侦听器(watch) 然而，挂载阶段还没开始，且 $el property 目前尚不可用
                作用: 此阶段常用于修改现有数据,新增数据(this.$set()),调用方法
                注意: 修改数据时,只能同步修改,不建议执行异步操作(异步操作会等所有同步代码执行完毕之后在执行 => 此时页面已经挂载完毕)

            beforeMount:  在挂载开始之前被调用：相关的 render 函数首次被调用。(已经将模板解析为虚拟DOM,但是渲染为真实DOM)
                作用: 此阶段是页面挂载前修改数据的最后一次机会,常用于修改现有数据(不建议执行异步操作),新增数据(this.$set()),调用方法  => 此阶段之后,将进入挂载阶段,将虚拟DOM渲染为真实DOM,如果在修改数据,进入更新阶段

            mounted: 在挂载开始之后被调用, 已经将虚拟DOM渲染为真实DOM, el 被新创建的 vm.$el 替换了
                作用: 此阶段表示初始化渲染已经结束, 如果在修改数据,会进入更新阶段 (可以执行一系列异步操作, 绑定计时器/延时器, 发送ajax请求)



            更新阶段
                beforeUpdate: 发生在数据改变后,视图更新前, 此时页面中的内容还是更新前的内容 
                    作用: 获取页面更新前的内容

                beforeUpdate: 发生在数据改变且视图更新后, 此时页面中的内容已经是更新后的内容 
                    作用: 获取页面更新后的内容

                注意: 不建议在更新阶段 再次修改数据, 容易造成递归操作


            Vue2 => 销毁阶段
                beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用。
                    作用: 清除当前Vue实例绑定的 计时器 延时器, 绑定的事件(Vue自定义事件, 原生JS事件)

                destroyed: 发生在实例销毁之后,对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。 (东西都还在,但是不生效了)
                    作用: 没啥作用,啥都干不了了




        注意:  
            无论是否使用Vue生命周期钩子函数, 都不会影响Vue生命周期正常执行
            Vue生命周期钩子函数,只是为了帮助用户不同阶段添加自己的代码的辅助函数 


    
    */

    var vm = new Vue({
        el:"#app",
        data:{
            count:100,
            num:0,
            timer:null,
        },
        methods: {
            addCount(){
                this.count ++;
            },
            destroyHandler(){
                this.$destroy();
            },
            start(){
                clearInterval(this.timer);
                this.timer = setInterval(()=>{
                    this.num++;
                    console.log("num++",this.num);
                },1000);
            },
            pause(){
                clearInterval(this.timer);
            },

        },
        computed: {
            doubleCount:function(){
                return this.count * 2;
            }
        },
        watch:{
            count:function(newVal,oldVal){
                console.log("count改变了",newVal,oldVal);
            }
        },
        mounted () {
            this.start();

            // 原生JS事件
            window.addEventListener("resize",()=>{
                console.log("窗口大小改变之后");
            })

        },
        beforeDestroy () {
            this.pause();
            
            window.removeEventListener("resize",()=>{
                console.log("窗口大小改变之后");
            })
        },
        destroyed () {
            
        }

       

    })


</script>
</html>